<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>小米账号-登录</title>
		<link rel="stylesheet" href="register.css">
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		a {
			text-decoration: none;
		}

		li {
			list-style: none;
		}

		.header {
			display: block;
			width: 1130px;
			height: 98px;
			margin: 0 auto;
			text-align: center;
		}

		.logo {
			float: left;
			display: block;
			width: 55px;
			height: 55px;
			background-image: url(images/mi-logo.png);
			background-color: #FF6700;
			background-position: 50%;
			margin-top: 20px;
		}

		.logo_text {
			float: left;
			margin-left: 10px;
			margin-top: 20px;
		}

		.logo_text h2 {
			font-weight: 400;
			letter-spacing: 5px;
		}

		.logo_text p {
			margin-top: 5px;
			font-size: 6px;
		}

		/* 中间部分开始 */
		.middle {
			position: relative;
			height: 588px;
			background-image: url(images/register_middle_banner.jpg);
			background-repeat: no-repeat;
			background-position: 50% 0;
		}

		.user {
			position: absolute;
			top: 35px;
			right: 190px;
			width: 410px;
			height: 556px;
			background-color: white;
		}

		.user_header {
			height: 82px;
			text-align: center;
			line-height: 82px;
		}

		.user_header a {
			padding: 27px 0 24px;
			text-align: center;
			font-size: 24px;
			color: #666;
		}

		.user_header a:hover {
			color: #FF6700;
		}

		.line {
			width: 1px;
			height: 24px;
			margin: 0 35px 0 42px;
			border: 1px solid #e0e0e0;
			background: #e0e0e0;
		}

		.user_middle input {
			color: #686868;
			width: 306px;
			height: 25px;
			border: 1px solid #e0e0e0;
			padding: 13px 16px 13px 14px;
			margin: 0 0 20px 35px;
		}

		.user_middle>a {
			display: block;
			width: 308px;
			height: 25px;
			background-color: #FF6700;
			padding: 13px 16px 13px 14px;
			margin: 0 0 15px 35px;
			color: white;
			font-size: 14px;
			text-align: center;
			line-height: 25px;
		}

		.user_middle li {
			width: 308px;
			padding-bottom: 35px;
			margin: 0 0 0 45px;
			font-size: 14px;
			text-align: center;

		}

		.user_middle li a {
			color: #757575;
		}

		.user_middle li a:hover {
			color: #FF6700;
		}

		.user_footer img {
			margin: 80px 0 0 80px;
		}

		.footer {
			display: block;
			height: 30px;
			margin: 100px 0 0 600px;

		}

		.footer li {
			float: left;
		}

		.footer li a,
		.footer li span {
			color: #757575;
			font-size: 14px;
		}

		.footer li a {
			display: inline-block;
			height: 19px;
			padding: 0 10px;
			text-align: center;
		}

		.footer li a:hover {
			color: #FF6700;
		}
	</style>
	<body>
		<!-- 头部部分 开始 -->
		<div href="#" class="header">
			<a href="index.html" class="logo"></a>
			<div class="logo_text">
				<h2>小米商城</h2>
				<p>让每个人都能享受科技的乐趣</p>
			</div>

		</div>
		<!-- 头部部分 结束 -->


		<!-- 中间部分 开始 -->
		<div class="middle">
			<div class="user">
				<div class="user_header">
					<div class="title">
						<a href="#">账号登录</a>
						<span class="line"></span>
						<a href="#">扫码登录</a>
					</div>
				</div>
				<div class="user_middle">
					<input type="text" placeholder="邮箱/手机号码/小米ID">
					<input type="password" name="mima" id="password" placeholder="密码">
					<a href="#">登录</a>
					<li><a href="#">手机短信登录/注册</a></li>
					<li><a href="login.html">立即注册</a> <span>|</span> <a href="#">忘记密码</a></li>
				</div>
				<div class="user_footer"><img src="images/register_middle_last.png" alt=""></div>
			</div>
		</div>
		<!-- 中间部分 结束 -->


		<!-- 尾部部分 开始 -->
		<div class="footer">
			<ul>
				<li><a href="#">简体</a><span>|</span></li>
				<li><a href="#">繁体</a><span>|</span></li>
				<li><a href="#">English</a><span>|</span></li>
				<li><a href="#">常见问题</a><span>|</span></li>
				<li><a href="#">隐私政策</a></li>
			</ul>

		</div>
		<!-- 尾部部分 结束 -->
	</body>

</html>